<template>
  <div>
    <el-table :data="owner" border style="width: 1090px;margin: auto;" class :row-class-name="tableRowClassName">
      <el-table-column prop="ownerId" label="业主ID" width="190"></el-table-column>
      <el-table-column prop="ownerName" label="业主姓名" width="100"></el-table-column>
      <el-table-column prop="ownerPhone" label="业主联系方式" width="120"></el-table-column>
      <el-table-column label="业主住房地址" width="160">
        <template slot-scope="scope">
          <span v-show="!scope.row.ownerArea==null">{{scope.row.ownerArea}}区</span>
          {{scope.row.ownerDong}}栋{{scope.row.ownerUnit}}单元{{scope.row.ownerRoom}}室
        </template>
      </el-table-column>
      <el-table-column prop="ownerHome" label="业主住房面积/㎡" width="130"></el-table-column>
      <el-table-column prop="price" label="物业费单价（元/㎡）" width="160"></el-table-column>
      <el-table-column label="应缴时间" width="150">
        <template slot-scope="scope">
          {{scope.row.propEndDate|YMDdate}}
        </template>
      </el-table-column>
      <el-table-column prop="isSubmit" label="是否缴费" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.isSubmit">已缴费</span>
          <span v-if="!scope.row.isSubmit">未缴费</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 0 auto; 
    width:750px;
    border-width:5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[1 , 10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      pro_id: "",
      owner: [
        // {
        //   ownerId: "123", //aoto
        //   ownerName: "sss",
        //   ownerPhone: "13245678900",
        //   ownerHome: "ownerHome",
        //   ownerArea: "A",
        //   ownerDong: "1",
        //   ownerUnit: "1",
        //   ownerRoom: "101",
        //   propEndDate: "2020-1-12",
        //   propCost: "1010",
        //   price: "10",
        //   count: "9",
        //   isSubmit: "false"
        // }
      ],
      page: {
        size: 10,
        current: 1,
        total: 5
      }
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      //分页的标记数，一页有多少数据。
      this.page.size = val;
      this.axios
        .post("prop/showpropcost", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data[0].total;
          this.page.size = res.data[0].size;
          this.page.current = res.data[0].current;
          this.owner = res.data;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(`每页 ${val} 条`);
      console.log(val);
    },
    handleCurrentChange(val) {
      //当前是第几页
      this.page.current = val;
      this.axios
        .post("prop/showpropcost", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data[0].total;
          this.page.size = res.data[0].size;
          this.page.current = res.data[0].current;
          this.owner = res.data;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(`当前页: ${val}`);
      console.log(val);
    },
    todelete(index) {
      this.centerDialogVisible = true;
      this.pro_id = index;
    },
    setIsSubmit(e) {
      if (e === "true") {
        alert("OK");
      } else if (e === "false") {
        alert("OKK");
      }
    },
    // 选项标记颜色
    tableRowClassName({ row, rowIndex }) {
      // console.log(row.isSubmit)
      if (row.isSubmit === false) {
        return "warning-row";
      } else if(row.isSubmit === true){
        return " ";
      }
    }
  },
  created() {
    this.axios
      .post("prop/showpropcost", this.page)
      .then(res => {
        this.page.total = res.data[0].total;
        this.page.size = res.data[0].size;
        this.page.current = res.data[0].current;
        this.owner = res.data;
        // console.log(res);
        // console.log(res.data[0].isSubmit);
      })
      .catch(err => {
        console.error(err);
      });
  },
  components: {}
};
</script>

<style scope>
.showdiv {
  border: solid 1px #df1111;
}

.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
